<!--登录-->
<template>
    <uni-nav-bar title="登录" :statusBar="true" fixed :border="false" backgroundColor="#4BA9FB" color="#FFFFFF">
    </uni-nav-bar>

    <view class="container">
        <!-- 背景 -->
        <image class="loginBg" src="@/static/images/login_bg.png" mode="scaleToFill"/>

        <!-- 中间内容 -->
        <view class="loginBox">
            <!-- 中间背景 -->
            <image class="centerBg" src="@/static/images/login_center_bg.png" mode="widthFix"/>

            <!-- 中间编辑内容 -->
            <view class="loginConent">
                <!-- 中间车 -->
                <image class="carIcon" src="@/static/images/car_icon.png" mode="scaleToFill"/>

                <!-- 用户名 -->
                <view class="inputLayout">
                    <view class="inputContent">
                        <view class="tagTxt">账号：</view>
                        <u-input :customStyle="{height:'100%',border:'none'}" placeholder="请输入账号"
                                 v-model="userName" clearable
                                 @clear="onClearClick">
                        </u-input>
                    </view>
                    <image class="inputIcon" src="@/static/images/login_user_icon.png" mode="widthFix"/>
                </view>

                <!-- 密码 -->
                <view class="inputLayout">
                    <view class="inputContent">
                        <view class="tagTxt">密码：</view>
                        <u-input :customStyle="{height:'100%',border:'none'}" placeholder="请输入密码"
                                 v-model="passWord" clearable type="password"
                                 @clear="onClearClick">
                        </u-input>
                    </view>
                    <image class="inputIcon" src="@/static/images/login_pwd_icon.png" mode="widthFix"/>
                </view>

                <!-- 记住密码 -->
                <u-checkbox :customStyle="{margin: '30rpx 0'}" label="记住密码" name="agree" usedAlone
                            v-model:checked="isRemember" activeColor="#4BA9FB">
                </u-checkbox>

                <!-- 登录 -->
                <view class="btnLayout">
                    <view class="btnLogin" @click="onLoginClick">登录</view>
                </view>
            </view>
        </view>
    </view>

    <!-- 账号状态提示 -->
    <c-register-notice v-model:showPoup="isShowNotice" :accountStatus="accountStatus"></c-register-notice>
</template>

<script setup>
import * as Constants from "@/common/Constants"
import {onLoad, onShow} from "@dcloudio/uni-app";
import {getOpenidRequest, getStatusRequest, getUserReuqest, loginRequest} from "@/net/Api";
import {myStore} from "@/stores";

const store = myStore()
const userName = ref("")
const passWord = ref("")
const openId = ref("")
const isRemember = ref(false)
const accountStatus = ref("")
const isShowNotice = ref(false)

computed(() => {
    return {
        Constants
    }
})

onLoad((options) => {
    let uName = uni.getStorageSync(Constants.USERNAME)
    let pwd = uni.getStorageSync(Constants.PASSWORD)
    if (uName && pwd) {
        isRemember.value = true
        userName.value = uName
        passWord.value = pwd
    }
})

onShow(() => {
    wxLogin()
})

/**
 * 账号输入框清空
 */
const onClearClick = () => {
    userName.value = ""
    passWord.value = ""
}

/**
 * 微信登录
 */
const wxLogin = () => {
    wx.login({
        timeout: 3000,
        success(res) {
            getOpenId(res)
        }
    })
}

/**
 * 获取openid
 */
const getOpenId = (wxLoginResult) => {
    let params = {
        appid: 'wx9121b7073abdc41e',
        jsCode: wxLoginResult.code,
        secret: "f56a1a63ba0092a4e57f96b8db3159fe"
    }
    getOpenidRequest(params).then((res) => {
        openId.value = res.data.openid
        store.deviceId = res.data.openid

        getStatus()
    }).catch((err) => {

    })
}

/**
 * 获取返回的注册状态
 */
const getStatus = () => {
    uni.setStorageSync("deviceId", openId.value)
    let params = {
        deviceId: openId.value
    }
    getStatusRequest(params).then((res) => {
        // -1未注册 0待审批 2被禁用 1启用
        accountStatus.value = res.data
        if (accountStatus.value !== 1) {
            isShowNotice.value = true
        }
    }).catch((err) => {

    })
}

/**
 * 登录
 */
const onLoginClick = () => {
    if (userName.value === "") {
        uni.showToast({
            title: "请输入账号",
            icon: "none"
        })
        return
    }
    if (passWord.value === "") {
        uni.showToast({
            title: "请输入密码",
            icon: "none"
        })
        return
    }
    console.log("isRemember = " + isRemember.value)

    let params = {
        username: userName.value,
        password: passWord.value
    }
    uni.showLoading()
    loginRequest(params).then((res) => {
        uni.setStorageSync(Constants.TOKEN, res.data)

        if (isRemember.value) {
            uni.setStorageSync(Constants.USERNAME, userName.value)
            uni.setStorageSync(Constants.PASSWORD, passWord.value)
        } else {
            uni.removeStorageSync(Constants.USERNAME)
            uni.removeStorageSync(Constants.PASSWORD)
        }
        setTimeout(() => {
            uni.hideLoading()
            uni.switchTab({
                url: '/pages/home/home',
            })

            getUserData()
        }, 400)
    }).catch((err) => {
        uni.hideLoading()
    })
}

/**
 * 获取用户信息
 */
const getUserData = () => {
    getUserReuqest({}).then((res) => {
        store.deptId = res.data.useSysDeptId
        store.userId = res.data.id
    }).catch((err) => {

    })
}

</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: calc(100vh - 44px - var(--status-bar-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loginBg {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.loginBox {
    width: 100%;
    position: relative;
}

.centerBg {
    width: 98%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -63%);
}

.carIcon {
    width: 150rpx;
    height: 150rpx;
    position: absolute;
    top: -160rpx;
    left: 50%;
    transform: translateX(-50%);
}

.loginConent {
    width: 80%;
    height: 550rpx;
    margin-top: 150rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -72%);
    display: flex;
    flex-direction: column;
}

.inputLayout {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #EEEEEE;
}

.inputContent {
    display: flex;
    align-items: center;
}

.tagTxt {
    font-size: 34rpx;
    color: #333333;
}

.inputIcon {
    width: 45rpx;
    height: 40rpx;
}

.btnLayout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
}

.btnLogin {
    width: 86%;
    background-color: $themeColor;
    border: none;
    color: #FFFFFF;
    font-size: 34rpx;
    text-align: center;
    padding: 25rpx 0;
    border-radius: 10rpx;
    letter-spacing: 1rpx;
}

</style>